<template>
  <div class="low-code-container">
    <ToolBar />
    <main class="content-main">
      <!-- 左侧组件列表 -->
      <section class="left">
        <ComponentList />
      </section>
      <!-- 中间画布 -->
      <section class="center">
        <Editor />
      </section>
      <!-- 右侧属性列表 -->
      <section class="right">
        <AttrSetting />
      </section>

    </main>

  </div>

</template>
<script>
import { mapState } from "vuex"
import "./custom-components"
import EventBus from "./EventBus"
import ToolBar from "./ToolBar"
// import StyleList from "./StyleList"
import ComponentList from "./ComponentList"
import Editor from "./Editor"
import AttrSetting from "./AttrSetting"
import Preview from "./Preview"



export default {
  data() {
    return {
      modalType: "page",
      pageSetting: {
        globalTitleStyle: {}
      },
      componentList: [],
      isShow: false
    }
  },
  computed: {
    ...mapState("lowCode", {
      previewData: state => state.previewData
    })
  },
  created(){
    // EventBus.$oneOn("preview", ()=> {
    //   const {
    //     previewData,
    //   } = this.$store.state.lowCode
    //   const componentList = previewData.componentList.map(component => {
    //     const item = {
    //       ...component,
    //       style: {
    //         ...component.style
    //       },
    //       events: {
    //         ...component.events
    //       },
    //       props: {
    //         ...component.props
    //       }
    //     }

    //     if(item.tag.indexOf('picker') > -1 && item.props.value){
    //       if(item.props.value instanceof Array){
    //         item.props.value = item.props.value.map(date => moment(date))
    //       }
    //       else {
    //         const value = moment(item.props.value)
    //         item.props.value = value
    //       }

    //     }
    //     return item
    //   })
    //   // this.$store.commit("lowCode/setPreviewData", {componentList, pageSetting: previewData.pageSetting})
    //   // const componentList = canvasComponentList
    //   // // this.pageSetting = pageSetting
    //   // this.$store.commit("lowCode/setPreviewData", {componentList, pageSetting})
    //   this.$router.push("/board/boardPreview")
    //   // this.$refs["preview"].show({pageSetting: previewData.pageSetting, componentList})
    //   // this.modalType = "modal"


    // })
  },
  mounted() {

  },
  components: {
    ToolBar,
    ComponentList,
    Editor,
    AttrSetting,
    Preview
  },
}
</script>

<style scoped lang="less" >
  @import url("./index.less");
</style>
